import React from 'react';
import { connect } from 'react-redux';
import { formatUtcTime } from 'Utils/index';
import Api from 'Utils/api';
import { Button, Icon, Table, message } from 'antd';
import { API_HOST } from 'Constants/config';
import CommonBg from 'Page/DispatchPage/Components/CommonBorder';
import '../index.scss';

const $ = require('jquery');

const PAGE_SIZE = 2;

class TypicalDetail extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      id: props.params.id,
      data: {},
      parentId: '',
      orderList: [],
      feedList: [],
      planList: [],
      orderDataCount: 0,
      feedDataCount: 0,
      planDataCount: 0,
      orderListPage: 1,
      feedListPage: 1,
      planListPage: 1,
    };
    this.condition = { offset: 0, limit: PAGE_SIZE };
    this.onPrint = ::this.onPrint;
  }
  componentDidMount() {
    this.initList();
  }
  initList() {
    const { id } = this.state;
    const api = new Api({
      method: 'GET',
      path: `/cases/${id}`,
      success: (json) => {
        this.setState({
          data: json,
          parentId: json.task_id,
        }, () => {
          this.initOrder();
          this.initFeedback();
          this.initPlan();
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  initOrder() {
    const { parentId } = this.state;
    const api = new Api({
      method: 'GET',
      path: `/instructions/${parentId}`,
      query: { ...this.condition },
      success: (json) => {
        this.setState({
          orderList: json.data_list,
          orderListPage: ((this.condition.offset / PAGE_SIZE) + 1),
          orderDataCount: json.total_count
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  onOrderListPageChange(page) {
    this.setState({ orderListPage: page }, this.initOrder.bind(this));
    this.condition.offset = (page - 1) * PAGE_SIZE;
  }
  initFeedback() {
    const { parentId } = this.state;
    const api = new Api({
      method: 'GET',
      path: `/feedbacks/${parentId}`,
      query: { ...this.condition },
      success: (json) => {
        this.setState({
          feedList: json.data_list,
          feedListPage: ((this.condition.offset / PAGE_SIZE) + 1),
          feedDataCount: json.total_count
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  onFeedListPageChange(page) {
    this.setState({ feedListPage: page }, this.initFeedback.bind(this));
    this.condition.offset = (page - 1) * PAGE_SIZE;
  }
  initPlan() {
    const { parentId } = this.state;
    const api = new Api({
      method: 'GET',
      path: `/schemas/start/${parentId}`,
      success: (json) => {
        this.setState({
          planList: json.data_list,
          planListPage: ((this.condition.offset / PAGE_SIZE) + 1),
          planDataCount: json.total_count
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  onPlanListPageChange(page) {
    this.setState({ planListPage: page }, this.initPlan.bind(this));
    this.condition.offset = (page - 1) * PAGE_SIZE;
  }
  onPrint() {
    const area = $('div#detailBody');
    const options = {
      mode: 'iframe',
      popClose: false,
      extraCss: '',
      retainAttr: ['class', 'id', 'style', 'on'],
      extraHead: '<link type="text/css" rel="stylesheet" href="./bundle1.css" /> <link type="text/css" rel="stylesheet" href="./bundle2.css" /> ',
    };
    area.printArea(options);
  }
  generatorOrderColumns() {
    return [
      {
        title: '序号',
        dataIndex: 'id',
        render: text => (
          <span >{text}</span >
        )
      },
      {
        title: '时间',
        dataIndex: 'create_time',
        render: text => (
          <span>{formatUtcTime(text)}</span>
        )
      },
      {
        title: '指令对象',
        dataIndex: 'accepter',
        render: text => (
          <span>{text}</span>
        )
      },
      {
        title: '指令内容',
        dataIndex: 'content',
        render: text => (
          <span>{text}</span>
        )
      }
    ];
  }
  generatorFeedBackColumns() {
    return [
      {
        title: '序号',
        dataIndex: 'id',
        render: text => (
          <span >{text}</span >
        )
      },
      {
        title: '时间',
        dataIndex: 'create_time',
        render: text => (
          <span>{formatUtcTime(text)}</span>
        )
      },
      {
        title: '反馈人员',
        dataIndex: 'repondent',
        render: text => (
          <span>{text}</span>
        )
      },
      {
        title: '反馈内容',
        dataIndex: 'content',
        render: text => (
          <span>{text}</span>
        )
      }
    ];
  }
  generatorPlanColumns() {
    return [
      {
        title: '序号',
        dataIndex: 'id',
        render: text => (
          <span >{text}</span >
        )
      },
      {
        title: '时间',
        dataIndex: 'create_time',
        render: text => (
          <span>{formatUtcTime(text)}</span>
        )
      },
      {
        title: '预案内容对象',
        dataIndex: 'executor',
        render: text => (
          <span>{text}</span>
        )
      },
      {
        title: '预案内容',
        dataIndex: 'title',
        render: text => (
          <span>{text}</span>
        )
      }
    ];
  }
  render() {
    const orderColumns = this.generatorOrderColumns();
    const feedColumns = this.generatorFeedBackColumns();
    const planColumns = this.generatorPlanColumns();
    const { data } = this.state;
    return (
      <CommonBg
        title="典型案例详情"
        content={
          <div className="typical-case-detail" id="detailBody">
            <div className="title">
              典型案例名称
              <Button className="right-btn" onClick={this.onPrint} style={{ float: 'right', width: 148, height: 48, fontSize: 20 }}>
                <Icon type="printer" />
                打印
              </Button>
            </div>
            <div className="case-content">
              <div>{data.case_name}</div>
              <div>{formatUtcTime(data.task_time)}</div>
              <div>{data.task_content}</div>
            </div>
            <div className="table-container">
              <div className="table-title">
                指令信息：
              </div>
              <div className="table-content">
                <Table
                  rowKey={record => record.id}
                  columns={orderColumns}
                  bordered
                  dataSource={this.state.orderList}
                  pagination={{
                    pageSize: PAGE_SIZE,
                    total: this.state.orderDataCount,
                    current: this.state.orderListPage,
                    onChange: this.onOrderListPageChange.bind(this)
                  }}
                />
              </div>
            </div>
            <div className="table-container">
              <div className="table-title">
                反馈信息：
              </div>
              <div className="table-content">
                <Table
                  rowKey={record => record.id}
                  columns={feedColumns}
                  bordered
                  dataSource={this.state.feedList}
                  pagination={{
                    pageSize: PAGE_SIZE,
                    total: this.state.feedDataCount,
                    current: this.state.feedListPage,
                    onChange: this.onFeedListPageChange.bind(this)
                  }}
                />
              </div>
            </div>
            <div className="table-container">
              <div className="table-title">
                启动预案信息：
              </div>
              <div className="table-content">
                <Table
                  rowKey={record => record.id}
                  columns={planColumns}
                  bordered
                  dataSource={this.state.planList}
                  pagination={{
                    pageSize: PAGE_SIZE,
                    total: this.state.planDataCount,
                    current: this.state.planListPage,
                    onChange: this.onPlanListPageChange.bind(this)
                  }}
                />
              </div>
            </div>
            <div className="table-container">
              <div className="table-title">
                指挥领导：
              </div>
              <div className="table-content">
                <div className="leader">{data.leader}</div>
                <div className="leader-content">
                  {data.leader_speaking}
                </div>
                {
                  data.summary &&
                  <div className="leader-audio">
                    <audio controls preload className="audio" style={{ width: 840 }} >
                      <source src={`${API_HOST}/files/${data.summary}`} type="audio/webm" />
                    </audio>
                  </div>
                }
                {
                  data.picture &&
                  <div className="leader-img">
                    <img src={`${API_HOST}/files/${data.picture}`} alt="图片" />
                  </div>
                }
                {
                  data.video &&
                  <div className="leader-video">
                    <video controls preload className="video">
                      <source src={`${API_HOST}/files/${data.video}`} type="video/webm" />
                    </video>
                  </div>
                }
              </div>
            </div>
          </div>
        }
      />
    );
  }
}
function mapStateToProps(state) {
  return {
    ...state.routing,
    ...state.mapReducer
  };
}

export default connect(mapStateToProps)(TypicalDetail);
